/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <div class="login-model">

    <div class="login-container">
      <div class="login-left">
        <h1>Hi，您好！</h1>
        <h3>欢迎来到算力公共服务平台</h3>
        <!-- <img src="./img/login-text.png" alt="" srcset=""> -->
      </div>
      <div class="form-model">
        <div class="logo">
          <img
            src="./img/logo1.svg"
            alt=""
            style="height:52px"
          >
        </div>
        <div class="list">
          <label>{{$t('User Name')}}</label>
          <div>
            <el-input
              type="text"
              v-model.trim="userName"
              :placeholder="$t('Please enter user name')"
              maxlength="60"
              @keyup.enter.native="_ok"
            >
            </el-input>
          </div>
          <p
            class="error"
            v-if="isUserName"
          >
            {{userNameText}}
          </p>
        </div>
        <div class="list">
          <label>{{$t('Password')}}</label>
          <div>
            <el-input
              type="password"
              v-model="userPassword"
              :placeholder="$t('Please enter your password')"
              maxlength="20"
              @keyup.enter.native="_ok"
            >
            </el-input>
          </div>
          <p
            class="error"
            v-if="isUserPassword"
          >
            {{userPasswordText}}
          </p>
        </div>
        <div
          class="list"
          style="margin-top: 10px;"
        >
          <el-button
            style="width: 100%"
            type="primary"
            class="login-btn"
            :loading="spinnerLoading"
            long
            @click="_ok"
          >登录</el-button>
        </div>
      </div>
    </div>
    <div class="copyright">
      Copyright © 2023 湖南算力公共服务平台所有
    </div>
  </div>
</template>
<script>
  import i18n from '@/module/i18n'
  import io from '@/module/io'
  import cookies from 'js-cookie'

  export default {
    name: 'login-model',
    data () {
      return {
        spinnerLoading: false,
        userName: '',
        userPassword: '',
        isUserName: false,
        isUserPassword: false,
        userNameText: '',
        userPasswordText: ''
      }
    },
    props: {},
    methods: {
      _ok () {
        if (this._verification()) {
          this.spinnerLoading = true
          this._gLogin().then(res => {
            setTimeout(() => {
              this.spinnerLoading = false
              sessionStorage.setItem('isLeft', 1)
              if (res.data.permission.filter(e => e).length === 0) {
                this.$message.error('您还没有访问权限，请联系管理员')
                return
              }
              localStorage.setItem('permission', JSON.stringify(res.data.permission.map(e => e.permission)))
              localStorage.setItem('menu', JSON.stringify(res.data.permission))
              if (res.data.hasOwnProperty('Authorization')) {
                let sessionId = res.data.Authorization
                sessionStorage.setItem('sessionId', sessionId)
                cookies.set('sessionId', sessionId, { path: '/' })
              }
              window.location.href = `${window.SITE_URL}/index.html#/home`
              // if (this.userName === 'admin') {
              //   window.location.href = `${PUBLIC_PATH}/#/security/tenant`
              // } else {
              //   window.location.href = `${PUBLIC_PATH}/#/home`
              // }
            }, 1000)
          }).catch(e => {
            this.userPasswordText = e.msg
            this.isUserPassword = true
            this.spinnerLoading = false
          })
        }
      },
      _verification () {
        let flag = true
        if (!this.userName) {
          this.userNameText = `${i18n.$t('Please enter user name')}`
          this.isUserName = true
          flag = false
        }
        if (!this.userPassword) {
          this.userPasswordText = `${i18n.$t('Please enter your password')}`
          this.isUserPassword = true
          flag = false
        }
        return flag
      },
      _gLogin () {
        return new Promise((resolve, reject) => {
          io.post('login', {

          }, res => {
            console.log(res)
            resolve(res)
          }, () => { }, {
            params: {
              username: this.userName,
              password: this.userPassword
            }
          }).catch(e => {
            console.error(e)
            reject(e)
          })
        })
      }
    },
    watch: {
      userName () {
        this.isUserName = false
      },
      userPassword () {
        this.isUserPassword = false
      }
    },
    created () {
    },
    mounted () {
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.logo {
  margin: 20px auto;
  text-align: center;
}
.copyright {
  position: absolute;
  bottom: 10px;
  text-align: center;
  color: #ffffff;
  width: 100%;
  font-size: 14px;
}
.login-btn {
  background: linear-gradient(270deg, #33317e, #5a58c5) !important;
}
.login-model {
  .login-container {
    display: flex;
    margin: 0px auto;
    margin-top: calc(50vh - 250px);
    justify-content: center;
  }

  .login-left {
    width: 770px;
    padding-top: 120px;
    color: #ffffff;
    letter-spacing: 4px;
    h1 {
      font-size: 60px;
    }
    h3 {
      font-size: 56px;
    }
  }
  .form-model {
    padding: 50px;
    padding-top: 60px;
    width: 470px;
    height: 500px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    .title {
      margin-bottom: 20px;
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      background-clip: text;
      color: transparent;
      background-image: linear-gradient(270deg, #33317e 0%, #5a58c5 100%);
    }
    .list {
      margin-bottom: 24px;
      > label {
        font-size: 14px;
        display: block;
        height: 24px;
        line-height: 24px;
        font-weight: normal;
        color: #333;
      }
      > .error {
        font-size: 12px;
        color: #ff0000;
        padding-top: 6px;
      }
      &:last-child {
        margin-bottom: 6px;
      }
    }
  }
  .ctr {
    width: 400px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -80px;
    color: #fff;
  }
}
</style>
